<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>体验vue</title>
    <!-- 1.通过script引入vue库，也可以叫cdn方式引入 -->
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <!-- 2.vue要解析的模板转换成功后，在页面中要挂载的节点元素 -->
    <div id="app">
      <!-- 只需要在模板中声明一个，你的要求，vue会帮我们去实现展示 -->
      <!-- {{ 变量或表达式 }} vue中的模板语法，如果变量或表达式则一定要在下面的script配置中要存在 -->
      <h3>{{title}}</h3>
    </div>

    <script>
      // 3.实例化让数据和视图关联
      // Vue.createApp 创建一个vue实例对象,此方案为vue3方案，在vue2中为 new Vue()
      // Vue在初始化时，先把模板进行解析转为虚拟dom树，然后进行把数据替换掉模板中的占位，再转换为真实的dom，进行页面中挂载显示
      const app = Vue.createApp({
        // 定义响应式数据，此数据为对象，它是通过Proxy进行监听的
        // 此选项它要为一个函数且此函数必须要返回一个对象
        // createApp可以理解为创建一个组件，组件可以多次复用，如果直接为对象，共用一个引用地址，导致多次调用同一个地址，相互之前影响，而具备独立性
        // 初始化数据，模板中绑定的数据需要提前在data配置中来声明一下
        data() {
          return {
            title: 'hello'
          }
        }
      })
      // 指定挂载点
      app.mount('#app')

      // let a = () => ({})
      // let b = a()
      // let c = a()
      // console.log(b === c) // false
    </script>
  </body>
</html>
